<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>网页换肤</title>
    <link href="css/green.css" rel="stylesheet">
    <style>
        
        html,
        body {
            height: 100%;
        }
        
        body {
        		margin: 0;
            font-size: 12px;
        }
        
        ul,li {
        		margin: 0;
        		padding: 0;
            list-style-type: none;
        }
        
        a:link,
        a:visited {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        #outer {
            width: 500px;
            margin: 0 auto;
            overflow: hidden;
            zoom: 1;
        }
        
        #skin,
        #nav {
            overflow: hidden;
            zoom: 1;
        }
        
        #skin {
            margin: 10px 0;
        }
        
        #skin li {
            float: left;
            width: 6px;
            height: 6px;
            cursor: pointer;
            overflow: hidden;
            margin-right: 10px;
            text-indent: -9999px;
            border-width: 4px;
            border-style: solid;
        }
        
        #skin li.current {
            background: #fff!important;
        }
        
        #red {
            border-color: red;
            background: red;
        }
        
        #green {
            border-color: green;
            background: green;
        }
        
        #black {
            border-color: black;
            background: black;
        }
        
        #nav {
            border: 1px solid #fff;
        }
        
        #nav li {
            float: left;
            width: 82px;
            line-height: 25px;
            text-align: center;
            border-right: 1px solid #fff;
        }
        
        #nav li.last {
            width: 83px;
            border-right-width: 0;
        }
        
        #nav li a {
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="outer">
        <ul id="skin">
            <li id="red" title="红色">红</li>
            <li id="green" class="current" title="绿色">绿</li>
            <li id="black" title="黑色">黑</li>
        </ul>
        <ul id="nav">
            <li><a href="javascript:;">新闻</a></li>
            <li><a href="javascript:;">娱乐</a></li>
            <li><a href="javascript:;">体育</a></li>
            <li><a href="javascript:;">电影</a></li>
            <li><a href="javascript:;">音乐</a></li>
            <li class="last"><a href="javascript:;">旅游</a></li>
        </ul>
    </div>
    
    <script>
    window.onload = function ()
    {
        var oLink = document.getElementsByTagName("link")[0];
        
        var oSkin = document.getElementById("skin").
        getElementsByTagName("li");

        for(var i = 0; i< oSkin.length; i++)
        {
            oSkin[i].onclick = function ()
            {
                    // 清空所有li标签的类名
                for(var p in oSkin) {
                        oSkin[p].className = "";
                }
                // 给所点击的li标签添加类名
                this.className = "current";
                // 链接相应的css文档
                oLink['href'] = "css/" + this.id + ".css";
            }
        }

    };
</script>
</body>
</html>


<!--javascript: 是一个伪协议，其他的伪协议还有 mail:  tel:  file:  等等。
1
<a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a>
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。-->